<!-- Contents for Client Views -->
<div id='dataView'>
        <p>Welcome to the University of Washington Medical Lab Specimen
        Tracking System by team Jtacck.</p><!-- Link -->

        <div class="form">
            <!-- Link to expand and retract add shipment form -->
            <span id="addShipLink"
                 onclick=
                 "ECForm('addShipment','addShipLink', 'Click Here to Add New Shipment.');"><img src="img/details_open.png"
                 alt="Add Shipment" />Click Here to Add New Shipment.</span> 
                 <!-- Shipment Form -->

            <div id="addShipment"
                 class="hiddenForm">
                <form id='addShipmentForm'
                      name='addShipmentForm'
                      action="/add/shipment"
                      method='post'>
                    <!-- Destination Select Field -->

                    <div class="element" style="display:none">
                        <label>Destination:</label> <select id='dest'
                             class='text'
                             name='dest'>
                            <option selected="selected"
                                    value="-1">
                                Destination . . .
                            </option>
                        </select> 
                        <!-- Hidden Error Display Invalid Destination -->
                         <span id="mDest"
                             class="hiddenMessage err">Please Pick a
                             Destination.</span>
                    </div>
                    <!-- Fields to add individual specimen item to the list -->

                    <div>
                        <span>Add Specimen:</span> <span id="mItemList"
                             class="hiddenMessage err">Please Add at least one
                             item.</span>
                    </div>

                    <div class="element">
                        <!-- Specimen Name -->
                        <label>Specimen Name:</label> <input type='text'
                             class='text'
                             id='itemName'
                             name='itemName' /> 

                    </div>

                    <p><!-- Cap Color of Specimen --></p>

                    <div class="element">
                        <label>Cap Color:</label> <select id='itemColor'
                             class='text'
                             name='capColor'>
                            <option selected="selected">
                                Pick a Color . . .
                            </option>

                            <option>
                                Blue
                            </option>

                            <option>
                                Yellow
                            </option>

                            <option>
                                Red
                            </option>

                            <option>
                                Blue
                            </option>
                        </select> <!-- Error Display for Cap Color -->
                         <span id="mItemColor"
                             class="hiddenMessage err">Please Select a Color</span>
                    </div>
                    <div class="element">
                    	<label>Quantity:</label>
                        <input type="text" id="itemQuantity" name="itemQuantity" value="1"/>
                    </div>
                    <!-- Display message for fail/success specimen add -->

                    <p><span id='dispMess' name='dispMess'
                          class="hiddenMessage"></span></p>

                    <div class="element">
                        <!-- Add Item Button -->
                        <input type="button"
                             value="Add Item"
                             onclick="addItem();" />
                    </div><!-- Invisble field to hold list of specimens. -->

                    <div class="element hiddenForm">
                        <textarea id="itemList"
                             class='textarea'
                             name="itemList"
                             cols="100"
                             rows="10">
</textarea>
                    </div>

               
                        <!-- Table to display list of specimens added -->

                        <div class='table'>
                            <table cellpadding="0"
                                   cellspacing="0"
                                   border="0"
                                   class="display hiddenTable"
                                   id="specTable">
                                <thead>
                                    <tr class="delete">
                                        <th>Item Name</th>
                                        <th>Color</th>
                                    </tr>
                                </thead>

                                <tbody id="specTableBody"></tbody>
                            </table>
                        </div>
                   

                    <div class="element">
                        <!-- Description Field for Shipping Package -->
                        <label>Description:</label> 
                        <textarea id="description"
                             name="description"
                             cols="60"
                             rows="5">
</textarea>
                    </div><!-- Requirement Field for Shipping Package -->

                    <div class="element">
                        <label>Requirement:</label> 
                        <textarea id="requirement"
                             name="requirement"
                             cols="60"
                             rows="5">
</textarea>
                    </div>

                    <div class="element">
                        <label>Barcode:</label> <input type='text'
                             class='text'
                             id='barcode'
                             name='barcode' /> <span id="mBarcode"
                             class="hiddenMessage err">Please Enter Barcode.</span>
                    </div>

                    <div class="element">
                        <!-- Display fail/success message of  adding specimens. -->

                        <p><span id="mAddMessage"
                              class="hiddenMessage"></span></p>
                              <!-- Submit Shipment Button that call function addNewShipment() to process and sen
                data -->
                        <input type='button'
                             id='addSubmit'
                             name='addSubmit'
                             onclick="addNewShipment()"
                             value="Add New Shipment" /> <input type="reset"
                             value="Reset" />
                    </div><!-- Barcode Field -->
                </form>
            </div>
        </div><!-- Table Displaying Client's shipments -->
		
        <div class='table'>
            <table cellpadding="0"
                   cellspacing="0"
                   border="0"
                   class="display"
                   id="clientTable">
                    
                <thead >
                    <tr>
                        <th>Barcode</th>

                        <th>List of Content</th>

                        <th>ETA</th>

                        <th>Status</th>

                        <th>Description</th>

                        <th>Requirement</th>
                    </tr>
                </thead>

                <tbody id="clientTableBody"
                       class="generalData">
                       
                       </tbody>
            </table>
        </div>
    </div><!-- End of Data View Tab -->
